<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 查询操作 -->
      <div class="filter-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item >
            <el-input
              v-model="formInline.cardNo"
              :placeholder="$t('请输入礼物卡编号')"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item >
            <el-input
              v-model="formInline.userName"
              :placeholder="$t('请输入会员账号')"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item >
            <el-select v-model="formInline.status" clearable :placeholder="$t('请选择使用状态')">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-date-picker
              v-model="formInline.dateRange"
              type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="datePickerShortcuts"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >{{ $t("查询") }}
          </el-button>
        </el-form>
      </div>
      <h3>{{ $t("概况") }}</h3>
      <keep-alive>
        <div class="table-layout">
          <el-row>
            <el-col :span="2" class="table-cell-title">{{
              $t("礼物卡名称")
            }}</el-col>
            <el-col :span="2" class="table-cell-title">{{
              $t("礼物卡总量")
            }}</el-col>
            <el-col :span="2" class="table-cell-title">{{
              $t("购卡总量")
            }}</el-col>
            <el-col :span="2" class="table-cell-title">{{
              $t("未使用/张")
            }}</el-col>
            <el-col :span="2" class="table-cell-title">{{
              $t("使用中/张")
            }}</el-col>
            <el-col :span="2" class="table-cell-title">{{
              $t("已停用/张")
            }}</el-col>
            <el-col :span="2" class="table-cell-title">{{
              $t("总充值金额")
            }}</el-col>
            <el-col :span="2" class="table-cell-title">{{
              $t("总余额")
            }}</el-col>
            <el-col :span="2" class="table-cell-title">{{
              $t("总消费金额")
            }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="table-cell">{{ gift.name }}</el-col>
            <el-col :span="2" class="table-cell">{{ gift.numbers==0?$t("无限量"):gift.numbers }}</el-col>
            <el-col :span="2" class="table-cell">{{ gift.saledNum }}</el-col>
            <el-col :span="2" class="table-cell">{{ gift.noUseNum }}</el-col>
            <el-col :span="2" class="table-cell">{{ gift.inUseNum }}</el-col>
            <el-col :span="2" class="table-cell">{{ gift.stopNum }}</el-col>
            <el-col :span="2" class="table-cell">{{
                NumberUtils.formatCurrency(gift.totalAmount + gift.useAmount)
            }}</el-col>
            <el-col :span="2" class="table-cell">{{
                NumberUtils.formatCurrency(gift.totalAmount)
            }}</el-col>
            <el-col :span="2" class="table-cell">{{
                NumberUtils.formatCurrency(gift.useAmount)
            }}</el-col>
          </el-row>
        </div>
      </keep-alive>
    </el-card>

    <el-card class="box-card">
      <h3>{{ $t("详情") }}</h3>
      <div style="margin-bottom: 10px">
        <el-button type="primary" size="mini" @click="batchUpdateStatus(1)">批量启用</el-button>
        <el-button type="danger" size="mini" @click="batchUpdateStatus(2)">批量停用</el-button>
      </div>

      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        :data="userList"
        :element-loading-text="$t('Searching')"
        border
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
            type="index"
            align="center"
            :label="$t('序号')"
            width="50">
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('礼物卡编号')"
          prop="cardNumber"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('会员账号')"
          prop="userName"
        />
        <el-table-column
          align="center"
          :label="$t('用户姓名')"
          prop="nikeName"
        />
        <el-table-column align="center" :label="$t('手机号')" prop="mobile" />
        <el-table-column
          align="center"
          :label="$t('总充值金额')"
          prop="totalRechargeAmount"
          :formatter="NumberUtils.formatCurrencyInTable"
        />
        <el-table-column
          align="center"
          :label="$t('总余额')"
          prop="amount"
          :formatter="NumberUtils.formatCurrencyInTable"
        />
        <el-table-column
          align="center"
          :label="$t('总消费金额')"
          :formatter="NumberUtils.formatCurrencyInTable"
          prop="useAmount"
        />
        <el-table-column align="center" :label="$t('状态')" prop="status">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : scope.row.status === 0 ? 'info' : 'danger'">
              {{
                scope.row.status === 0
                  ? "未使用"
                  : scope.row.status === 1
                  ? "使用中"
                  : "已停用"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('购卡时间')" prop="addTime">
          <template slot-scope="scope">
            {{formatDateToYYYYMMDD(scope.row.addTime)}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('更新时间')"
          prop="updateTime"
        >
          <template slot-scope="scope">
            {{ formatDateToYYYYMMDD(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('操作')" width="250" >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              v-permission="['GET /admin/p/card_virtual_statistic_list']"
              @click="handleBind(scope.row)"
              >{{ $t("查看明细") }}
            </el-button>
            <el-button
              v-if="scope.row.status === 2"
              type="success"
              size="mini"
              @click="batchUpdateStatusSingle(scope.row.id, 1)"
            >
              启用
            </el-button>
            <el-button
              v-else
              type="danger"
              size="mini"
              @click="batchUpdateStatusSingle(scope.row.id, 2)"
            >
              停用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="userTotal > 0"
        :total="userTotal"
        :page.sync="formInline.page"
        :limit.sync="formInline.limit"
        @pagination="getUserList"
      />
    </el-card>

    <!-- 绑定实物卡对话框
    <el-dialog :visible.sync="bindDialogVisible" title='$t("绑定实物卡")'>
      <el-form ref="feedbackForm" :model="bindForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item :label='$t("实物卡号")' prop="reply">
          <el-input v-model="bindForm.entityCardCode"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bindDialogVisible = false">{{$t('Cancel')}}</el-button>
        <el-button type="primary" @click="doBind">{{$t('Confirm')}}</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  typeUserStatistic,
  toggleUserStatus,
  singleStatisticTotal,
} from "../../api/gift"; // Secondary package based on el-pagination
import NumberUtils from "../../utils/numberUtils";
import {datePickerShortcuts, formatDateToYYYYMMDD} from "../../utils/date";
export default {
  name: "VirtualCardStaticsdetail",
  components: { Pagination },
  data() {
    const typeMap = {
      1: this.$t("全场通用"),
      2: this.$t("指定类目"),
    };
    return {
      NumberUtils,
      datePickerShortcuts,
      formInline: {
        giftCardId: undefined,
        page: 1,
        limit: 20,
        dateRange:[],
      },
      statusOptions: [{
        value: 0,
        label: '未使用'
      }, {
        value: 1,
        label: '使用中'
      }, {
        value: 2,
        label: '已停用'
      }],
      typeMap,
      gift: {},
      userList: [],
      userTotal: 0,
      listLoading: false,
      bindDialogVisible: false,
      bindForm: {
        id: undefined,
        entityCardCode: undefined,
      },
      multipleSelection: [],
    };
  },
  created() {
    this.formInline.giftCardId = this.$route.query.id;
    this.getUserList();
  },
  methods: {
    formatDateToYYYYMMDD,
    getUserList() {
      singleStatisticTotal(this.formInline).then((response) => {
        this.gift = response.data.data;
      });

      typeUserStatistic(this.formInline)
        .then((response) => {
          this.userList = response.data.data.list;
          this.userTotal = response.data.data.total
          this.listLoading = false;
        })
        .catch(() => {
          this.userList = [];
          this.userTotal = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.getUserList();
    },

    handleBack() {
      this.$router.push({ path: "/promotion/giftcard" });
    },
    handleBind(row) {
      this.$router.push({
        path: "/promotion/VirtualCardStatics/detail/details",
        query: { allData: row.id, id: row.id },
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => item.id);
    },
    batchUpdateStatus(status) {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请先选择要操作的项");
        return;
      }
      toggleUserStatus({ ids: this.multipleSelection, status }).then(() => {
        this.$message.success("操作成功");
        this.getUserList();
      }).catch(() => {
        this.$message.error("操作失败");
      });
    },
    batchUpdateStatusSingle(id, status) {
      const actionText = status === 1 ? '启用' : '停用';
      this.$confirm(`确定要${actionText}该用户吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        toggleUserStatus({ ids: [id], status }).then(() => {
          this.$message.success("操作成功");
          this.getUserList();
        }).catch(() => {
          this.$message.error("操作失败");
        });
      }).catch(() => {
        this.$message.info("操作已取消");
      });
    }
  },
};
</script>

<style scoped>
.filter-container {
  margin-top: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
